<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/demo.css">
    <title>医疗大数据</title>
</head>

<body>
    <div class="bigBox">

        <!-- 顶部的名字 -->
        <div class="headerBox">
            <!-- 左边 -->
            <div class="header_left">
                <b style="font-size: 25px;"><i>北京<span style="color: aqua;">方圆平安</span>核酸检测大数据</i></b>
                <span style="color: aqua;"> &nbsp; / &nbsp;</span>
                <small style="font-size: 20px;">Nucleic acid detection BIG DATA</small>
            </div>
            <!-- 右边 -->
            <div class="header_right">
                <p>
                    <img src="./img/69上升、增加.png" alt="">
                    &nbsp;<span> 晴天 </span>
                    &nbsp;<span> / </span>
                    &nbsp;<span> 2022.04.28 </span>
                    &nbsp;<span> / </span>
                    &nbsp;<span> 周四 </span>
                    &nbsp;<span> / </span>
                    &nbsp;<span> 12:30:56 </span>
                </p>
            </div>
        </div>

        <!-- 主体 -->
        <div class="subjectBox">
            <!-- ===================  左边   ==================== -->
            <div class="leftBox">

                <!-- 总统计 -->
                <div class="left_item1">
                    <!-- <img src="./img/医疗修改_03.gif" alt=""> -->
                    <b> <i>总统计（前一日）</i> </b> <small>Total statistics Preveious day</small>
                </div>


                <!-- 最上方表格 -->
                <div class="left_table1">
                    <table>
                        <tr style="font-size: 12px;" class="a">
                            <th rowspan="4">点位<br>（管）</th>
                            <th>环境检测</th>
                            <th>混合检测</th>
                            <th>单管检测</th>
                            <th>总计</th>
                        </tr>
                        <tr style="color: azure; font-size: 12px;">

                            <td>5,464,232 <img src="./img/69上升、增加.png" alt=""> </td>
                            <td>64,232</td>
                            <td>424,323 <img src="./img/下降.png" alt="" alt=""> </td>
                            <td>53,535,242 <img src="./img/69上升、增加.png" alt=""> </td>
                        </tr>
                        <tr>

                            <td>65,412</td>
                            <td>65,412</td>
                            <td>542,412</td>
                            <td>53,525,242</td>
                        </tr>
                        <tr>

                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                        </tr>
                    </table>
                </div>

                <!-- 中间分隔线 -->
                <div class="xian"></div>

                <!-- 第下面第一个表格 -->
                <div class="left_table1" style="border-bottom: 1px dashed #e9e9e9c4;">
                    <table>
                        <tr style="font-size: 12px;">
                            <td rowspan="3"><b>点位<br>（管）</b></td>
                            <td style="color: azure; ">5,464,232 <img src="./img/69上升、增加.png" alt="" alt=""> </td>
                            <td style="color: azure; ">64,232<img src="./img/下降.png" alt="" alt=""> </td>
                            <td style="color: azure; ">424,323 </td>
                            <td style="color: azure; ">53,535,242 <img src="./img/下降.png" alt=""> </td>
                        </tr>
                        <tr>

                            <td>65,412</td>
                            <td>65,412</td>
                            <td>542,412</td>
                            <td>53,525,242</td>
                        </tr>
                        <tr>

                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                        </tr>
                    </table>
                </div>

                <!-- 第下面第二个表格 -->
                <div class="left_table1" style="border-bottom: 1px dashed #e9e9e9c4;">
                    <table>
                        <tr style="font-size: 12px;">
                            <td rowspan="3"><b>点位<br>（管）</b></td>
                            <td style="color: azure; ">5,464,232 <img src="./img/69上升、增加.png" alt=""> </td>
                            <td style="color: azure; ">64,232<img src="./img/下降.png" alt=""></td>
                            <td style="color: azure; ">424,323 <img src="./img/下降.png" alt=""> </td>
                            <td style="color: azure; ">53,535,242 <img src="./img/69上升、增加.png" alt=""> </td>
                        </tr>
                        <tr>

                            <td>65,412</td>
                            <td>65,412</td>
                            <td>542,412</td>
                            <td>53,525,242</td>
                        </tr>
                        <tr>

                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                        </tr>
                    </table>
                </div>

                <!-- 第下面第三个表格 -->
                <div class="left_table1" style="border-bottom: 1px dashed #e9e9e9c4;">
                    <table>
                        <tr style="font-size: 12px;">
                            <td rowspan="3"><b>点位<br>（管）</b></td>
                            <td style="color: azure; ">5,464,232 </td>
                            <td style="color: azure; ">64,232<img src="./img/下降.png" alt=""></td>
                            <td style="color: azure; ">424,323</td>
                            <td style="color: azure; ">53,535,242 <img src="./img/下降.png" alt=""> </td>
                        </tr>
                        <tr>

                            <td>65,412</td>
                            <td>65,412</td>
                            <td>542,412</td>
                            <td>53,525,242</td>
                        </tr>
                        <tr>

                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                        </tr>
                    </table>
                </div>

                <!-- 第下面第四个表格 -->
                <div class="left_table1">
                    <table>
                        <tr style="font-size: 12px;">
                            <td rowspan="3"><b>点位<br>（管）</b></td>
                            <td style="color: azure; ">5,464,232 <img src="./img/下降.png" alt=""> </td>
                            <td style="color: azure; ">64,232<img src="./img/下降.png" alt=""></td>
                            <td style="color: azure; ">424,323 <img src="./img/69上升、增加.png" alt=""> </td>
                            <td style="color: azure; ">53,535,242 <img src="./img/69上升、增加.png" alt=""> </td>
                        </tr>
                        <tr>

                            <td>65,412</td>
                            <td>65,412</td>
                            <td>542,412</td>
                            <td>53,525,242</td>
                        </tr>
                        <tr>

                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                            <td>昨天</td>
                        </tr>
                    </table>
                </div>


                <!-- 前一日各渠道情况 -->
                <div class="left_item1" style="margin: 5px 0;">
                    <!-- <img src="./img/69上升、增加拷贝3.png" alt=""> -->
                    <b> <i>前一日各渠道情况</i> </b> <small>Total statistics Preveious day</small>
                </div>

                <!-- 左边第一个渐变柱形图 -->
                <div class="left_item2 left_one_zhu"></div>


                <!-- 前一日各渠道情况 -->
                <div class="left_item1" style="margin: 5px 0;">
                    <img src="./img/69上升、增加拷贝3.png" alt="">
                    <b> <i>近期收款情况</i> </b> <small>Recent collection</small>
                </div>


                <!-- 左边下面第二个渐变柱形图  + 折线-->
                <div class="left_item3 left_one_zhu_zhe"></div>

            </div>

            <!-- ===================  中间   ==================== -->
            <div class="centerBox">

                <!-- 地图旁边的数据 -->
                <ul class="center_item2_ul1">
                    <li style="color: #71e2ed; font-size: 25px;">243524</li>
                    <li style="color: #ccc; font-size: 8px;">检测总管数（管）</li>
                </ul>

                <ul class="center_item2_ul2">
                    <li style="color: #71e2ed; font-size: 25px;">243524</li>
                    <li style="color: #ccc; font-size: 8px;">检测总管数（管）</li>
                </ul>

                <ul class="center_item2_ul3">
                    <li style="color: #71e2ed; font-size: 25px;">524</li>
                    <li style="color: #ccc; font-size: 8px;">检测总管数（管）</li>
                </ul>

                <!-- 中间的大地图 -->
                <div class="center_item2" id="echartsMap"></div>

                <!-- 收款比例与检测比例 -->
                <div class="center_item1" style="margin: 5px 0;">
                    <!-- <img src="./img/69上升、增加拷贝3.png" alt=""> -->
                    <b> <i>收款比例与检测比例</i> </b> &nbsp; <small>Recent collection</small>
                </div>

                <!-- 中间下面的两个圆饼 -->
                <div class="conter_item3">
                    <!-- 中间的  下面  第一个圆  -->
                    <div class="conter_left conter_left_yuan"></div>
                    <p class="conter_left_p1">收款</p>
                    <div class="conter_left_bor"></div>
                    <p class="conter_left_p2">46.19%</p>
                    <p class="conter_left_p3">46.19%</p>
                    <p class="conter_left_p4">46.19%</p>

                    <p class="conter_left_p8">检测</p>
                    <div class="conter_left_bor2"></div>
                    <p class="conter_left_p5">46.19%</p>
                    <p class="conter_left_p6">46.19%</p>
                    <p class="conter_left_p7">46.19%</p>
                    <!-- 中间的 分割线  -->
                    <div class="conter_bor"></div>

                    <!-- 中间的  下面  第二个圆  -->
                    <div class="conter_right conter_right_yuan"></div>
                </div>

            </div>



            <!-- ===================  右边   ==================== -->
            <div class="rightBox">

                <!-- 收款差异 -->
                <div class="right_item1" style="margin: 5px 0;">
                    <img src="./img/69上升、增加拷贝3.png" alt="">
                    <b> <i>收款差异</i> </b> <small>Recent collection</small>
                </div>

                <!-- 表格 -->
                <div class="right_table2">
                    <table>
                        <tr style="color: #1669c4; border-bottom: 2px dotted #3083da;">
                            <td>日期</td>
                            <td>渠道名称</td>
                            <td>差异金额(元)</td>
                            <td>差异原因</td>

                        </tr>
                        <tr style=" border-bottom: 2px dotted #3083da;">
                            <td>4.25</td>
                            <td>湖南采样点</td>
                            <td style="width: 60%;" class="jinE">
                                <span class="lan">-</span>
                                <span class="lan">424</span>
                            </td>
                            <td>周期性付款</td>
                        </tr>

                        <tr>
                            <td>4.25</td>
                            <td>园区自采</td>
                            <td style="width: 60%;" class="jinE">
                                <span class="cheng">-</span>
                                <span class="cheng">424</span>
                            </td>
                            <td>收费错误</td>
                        </tr>

                        <tr>
                            <td>4.25</td>
                            <td>于家务卫生院</td>
                            <td style="width: 60%;" class="jinE">
                                <span class="lan">-</span>
                                <span class="lan">424</span>
                            </td>
                            <td>单位月付</td>
                        </tr>

                        <tr>
                            <td>4.25</td>
                            <td>园区自采</td>
                            <td style="width: 60%;" class="jinE">
                                <span class="cheng">-</span>
                                <span class="cheng">424</span>
                            </td>
                            <td>企业自采报销</td>
                        </tr>

                        <tr>
                            <td>4.25</td>
                            <td>园区自采</td>
                            <td style="width: 60%;" class="jinE">
                                <span class="lan">-</span>
                                <span class="lan">424</span>
                            </td>
                            <td>个人逃单</td>
                        </tr>

                        <tr style=" border-bottom: 2px dotted #3083da;">
                            <td>4.25</td>
                            <td>园区自采</td>
                            <td style="width: 60%;" class="jinE">
                                <span class="cheng">-</span>
                                <span class="cheng">424</span>
                            </td>
                            <td>企业自采报销</td>
                        </tr>

                        <tr>
                            <td>4.25</td>
                            <td>园区自采</td>
                            <td style="width: 60%;" class="jinE">
                                <span class="lan">-</span>
                                <span class="lan">424</span>
                            </td>
                            <td>个人逃单</td>
                        </tr>


                    </table>
                </div>

                <!-- 右侧并排两个圆饼 -->
                <div class="right_item2">
                    <!-- 右侧 第一个  圆饼 -->
                    <div class="right_item3 right_one_yuan">
                    </div>
                    <div class="bor"></div>
                    <div class="right_item4 right_two_yuan"></div>

                    <div class="right_bor"></div>
                    <div class="right2_bor"></div>


                    <!-- 第一个圆的百分比数字 -->
                    <div class="right_left_p1">46.19%</div>
                    <div class="right_left_p2">46.19%</div>

                    <!-- 第二个圆的百分比数字 -->
                    <div class="right_left_p3">46.19%</div>
                    <div class="right_left_p4">46.19%</div>


                </div>

                <!-- 收款差异累计 -->
                <div class="right_item1" style="margin: 5px 0;">
                    <img src="./img/69上升、增加拷贝3.png" alt="">
                    <b> <i>收款差异累计</i> </b> <small>Recent collection</small>
                </div>

                <!-- 下面的周期性付款 -->
                <div class="right_item5">
                    <!-- 左边 -->
                    <div class="right_left">
                        <table>
                            <tr style="font-size: 12px;">
                                <th style="color: #ddd;"><i>周期性付款</i></th>
                                <th style="color: rgba(240, 255, 255, 0.897);">累计金额(元)</th>
                            </tr>
                            <tr>
                                <td></td>
                                <td style="color:#c36a49; text-align: right;">-3.642.876</td>
                            </tr>
                            <tr>
                                <td style="color:#7af2fe;">永乐店卫生院</td>
                                <td style="color:#7af2fe;">
                                    <span>942,876</span>
                                    <p class="col1"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 30px;"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 25px;"></p>
                                </td>
                            </tr>

                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 20px;"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 15px;"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 10px;"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 10px;"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 5px;"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 5px;"></p>
                                </td>
                            </tr>

                        </table>
                    </div>
                    <div class="right_center"></div>
                    <!-- 右边 -->
                    <div class="right_left">
                        <table>
                            <tr style="font-size: 12px;">
                                <th style="color: #ddd;"><i>周期性付款</i></th>
                                <th style="color: rgba(240, 255, 255, 0.897);">累计金额(元)</th>
                            </tr>
                            <tr>
                                <td></td>
                                <td style="color:#c36a49; text-align: right;">-3.642.876</td>
                            </tr>
                            <tr>
                                <td style="color:#7af2fe;">永乐店卫生院</td>
                                <td style="color:#7af2fe;">
                                    <span>942,876</span>
                                    <p class="col1"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2"></p>
                                </td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td>永乐店卫生院</td>
                                <td>
                                    <span>32.876</span>
                                    <p class="col2" style="width: 30px;"></p>
                                </td>
                            </tr>


                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./echarts/echarts.min.js"></script>
<script type="module">
    // ================== 中间地图
    import mapData from './mock/beijing_data.js'
    console.log(mapData);
    const map=echarts.init(document.querySelector('#echartsMap'))
    echarts.registerMap('china',mapData)
    const mapOption={
         geo:{
            map:'china',
            show:true,
            roam:true,
            center:[116.235738,40.210447],
            scaleLimit:{
            min:17,
            max:17,
           
         },
         itemStyle:{
                areaColor:'#6b81b3bd',
                borderColor:'#78effb',
                borderWidth:2
               },
        }
    }
    map.setOption(mapOption)



    //================= 右侧 第一个  圆饼
    const myChartsDom1 = document.querySelector('.right_one_yuan')
    const myCharts1 = echarts.init(myChartsDom1)
    const config1 = {
        title: {
            textStyle: {
                color: '#ccc'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical', // 换行
            top: 'bottom',
            left: 'auto',
            textStyle: {
                color: '#ddd'
            },
            itemHeight: 14,
            itemWidth: 14,
            itemGap: 20

        },
        color: ['#9a5335', '#238cbe'],
        series: [
            {
                type: 'pie',
                roseType: 'radius',   // 控制每个部分的大小
                // 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
                radius: ['22%', '55%'],
                center: ['40%', '40%'],
                data: [
                    {
                        name: '个人付款',
                        value: 60,
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#e9794c',
                                    },
                                    {
                                        offset: 1,
                                        color: '#86492f',
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        name: '周期性付款',
                        value: 75.19,
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#0675aa',
                                    },
                                    {
                                        offset: 1,

                                        color: '#57b4e0',
                                    },
                                ]),
                            },
                        },
                    },

                ],
                label: false, // 不显示圆上的字
            }
        ],

    }
    myCharts1.setOption(config1)


    // ==================== 右侧 第二个  圆饼
    const myChartsDom2 = document.querySelector('.right_two_yuan')
    const myCharts2 = echarts.init(myChartsDom2)
    const config2 = {
        title: {
            textStyle: {
                color: '#ccc'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical', // 换行
            top: 'bottom',
            left: 'auto',
            textStyle: {
                color: '#ddd'
            },
            itemHeight: 14,
            itemWidth: 14,
            itemGap: 20  // 距离

        },
        color: ['#9a5335', '#238cbe'],
        series: [
            {
                type: 'pie',
                roseType: 'radius',   // 控制每个部分的大小
                // 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
                radius: ['22%', '55%'],
                center: ['40%', '40%'],
                data: [
                    {
                        name: '个人付款',
                        value: 4,
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#e9794c',
                                    },
                                    {
                                        offset: 1,
                                        color: '#86492f',
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        name: '个人少付',
                        value: 6,
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#0675aa',
                                    },
                                    {
                                        offset: 1,

                                        color: '#57b4e0',
                                    },
                                ]),
                            },
                        },
                    },

                ],
                label: false, // 不显示圆上的字
            }
        ],

    }
    myCharts2.setOption(config2)



    // ============================ 中间 第一个圆
    const myChartsDom3 = document.querySelector('.conter_left_yuan')
    const myCharts3 = echarts.init(myChartsDom3)
    const config3 = {
        title: {
            text: ''
        },
        // color: ["#e5794c", "#42a6d5", "#0a386b"],  // 圆的每个颜色
        legend: {
            itemGap: 39, // 距离
            itemHeight: 14,
            itemWidth: 14,
            icon: "rect",
            orient: "vertical",
            top: "center",
            right: "32%",
            textStyle: {
                color: "#ddd",
                verticalAlign: "middle",
            }
        },
        series: [
            {
                type: 'pie',
                label: false, // 不显示文字
                radius: [35, 80],
                center: ['25%', '50%'],
                roseType: 'radius',   // 控制每个部分的大小
                // 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
                avoidLabelOverlap: true,
                data: [
                    {
                        value: 30,
                        name: '环境检测',
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#062344',

                                    },
                                    {
                                        offset: 0.5,
                                        color: '#115cae',
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        value: 35,
                        name: '单管检测',
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#0070a5',

                                    },
                                    {
                                        offset: 0.5,
                                        color: '#62c1ed',
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        value: 46.19,
                        name: '混合检测',
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#a95a38',

                                    },
                                    {
                                        offset: 0.5,
                                        color: '#fa8353',
                                    },
                                ]),
                            },
                        },
                    },

                ]
            }
        ]

    }
    myCharts3.setOption(config3)



    // ============================ 中间 第二个圆
    const myChartsDom4 = document.querySelector('.conter_right_yuan')
    const myCharts4 = echarts.init(myChartsDom4)
    const config4 = {
        title: {
            text: ''
        },
        // color: ["#e5794c", "#42a6d5", "#0a386b"],  // 圆的每个颜色
        legend: {
            itemGap: 39, // 距离
            itemHeight: 14,
            itemWidth: 14,
            icon: "rect",
            orient: "vertical",
            top: "center",
            right: "32%",
            textStyle: {
                color: "#ddd",
                verticalAlign: "middle",
            }
        },
        series: [
            {
                type: 'pie',
                label: false, // 不显示文字
                radius: [35, 80],
                center: ['28%', '50%'],
                roseType: 'radius',   // 控制每个部分的大小
                // 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
                avoidLabelOverlap: true,
                data: [
                    {
                        value: 30,
                        name: '环境检测',
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#062344',

                                    },
                                    {
                                        offset: 0.5,
                                        color: '#115cae',
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        value: 35,
                        name: '单管检测',
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#0070a5',

                                    },
                                    {
                                        offset: 0.5,
                                        color: '#62c1ed',
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        value: 46.19,
                        name: '混合检测',
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#a95a38',

                                    },
                                    {
                                        offset: 0.5,
                                        color: '#fa8353',
                                    },
                                ]),
                            },
                        },
                    },

                ]
            }
        ]

    }
    myCharts4.setOption(config4)



    // ============================ 左边第一个渐变柱形图
    const myChartsDom5 = document.querySelector('.left_one_zhu')
    const myCharts5 = echarts.init(myChartsDom5)
    const config5 = {
        title: {
            text: '',
            subtext: '元',
            subtextStyle: {
                color: '#fdfdfd'
            }
        },
        tooltip: {

        },
        grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '10%',
            left: '3%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        legend: {
            itemGap: 20, // 距离
            itemWidth: 10,
            icon: "rect",
            right: "0",
            textStyle: {   // 文字颜色
                color: "#ddd",
                // verticalAlign: "middle",
            },

        },
        xAxis: {
            data: ['园区自采', '台湖采样点', '工体采样点', '台湖采样点', '工体采样点', '工体采样点'],
            axisLabel: {
                interval: 0,
                rotate: -40 // 字体倾斜
            },
        },
        yAxis: {
            min: 0,
            max: 12,
            show: false,    // 是否显示
            splitLine: {   // 更改线
                show: true,
                lineStyle: {
                    type: 'dashed',  // 改为虚线
                },
                // color: "#f00",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
            },


        },
        series: [
            {
                name: '应收',
                type: 'bar',
                data: [10, 2, 7, 4, 5, 9],
                barWidth: 10, // 宽度
                itemStyle: {
                    normal: {
                        // borderRadius: [12, 12, 0, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0.9,
                                color: 'transparent',
                                opacity: 0.85,
                            },
                            {
                                offset: 0,
                                color: '#fa8251',
                                opacity: 0.79,
                            },
                        ]),
                    },
                },

            },
            {
                name: '实收',
                type: 'bar',
                data: [12, 3, 6, 5, 7, 6],
                barWidth: 10, // 宽度
                itemStyle: {
                    normal: {
                        // borderRadius: [12, 12, 0, 0],  //锐角
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0.9,
                                color: 'transparent',
                                opacity: 0.85,
                            },
                            {
                                offset: 0,
                                color: '#56a9b7',
                                opacity: 0.79,
                            },
                        ]),
                    },
                },

            },
            {
                name: '差异',
                type: 'bar',
                data: [2, 1, 2, 3, 1, 6],
                barWidth: 10, // 宽度
                itemStyle: {
                    normal: {
                        // borderRadius: [12, 12, 0, 0],  //锐角
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0.9,
                                color: 'transparent',
                                opacity: 0.85,
                            },
                            {
                                offset: 0,
                                color: '#8b36ff',
                                opacity: 0.79,
                            },
                        ]),
                    },
                },
            }
        ]
    }
    myCharts5.setOption(config5)



    // ============================ 左边第一个渐变柱形图
    const myChartsDom6 = document.querySelector('.left_one_zhu_zhe')
    const myCharts6 = echarts.init(myChartsDom6)
    const config6 = {
        title: {
            text: '',
            subtext: '元',
            subtextStyle: {
                color: '#fdfdfd'
            }
        },
        tooltip: {

        },
        grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '18%',
            left: '3%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        legend: {
            itemGap: 20, // 距离
            itemWidth: 10,
            icon: "rect",
            right: "0",
            textStyle: {   // 文字颜色
                color: "#ddd",
                // verticalAlign: "middle",
            },

        },
        xAxis: {
            data: ['420', '421', '422', '423', '424', '425', '426', '427', '428', '429', '5.1'],
            axisLabel: {
                interval: 0,
                rotate: -90 // 字体倾斜
            },

        },
        yAxis: [

            // 第一个y轴，就是 yAxisIndex:0 // 折线
            {
                min: 2000,
                max: 10000,
                show: true,
                splitLine: {   // 更改线
                    show: false,
                    lineStyle: {
                        type: 'dashed',  // 改为虚线
                    },
                },
            },
            // 第二个y轴，就是  yAxisIndex:1 // 柱子
            {
                min: 400,
                max: 2000,
                // 分割线
                splitLine: {
                    show: false   // 是否显示， false隐藏   true显示
                },
                // min: 0,
                // max: 300
            },
        ],
        // 改变颜色
        textStyle: {
            color: '#ddd'
        },
        series: [
            // 柱形图
            {
                type: 'bar',
                barWidth: 10, // 宽度
                name: '应收',
                datasetIndex: 0,
                yAxisIndex: 0,   // 指定使用第一个y轴
                encode: {
                    x: 0,
                    y: 1
                },
                data: [7000, 7000, 9000, 6000, 5000, 6000, 5000, 8000, 7000, 5000, 9000],
                itemStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0.9,
                                    color: 'transparent',
                                    opacity: 0.85,
                                },
                                {
                                    offset: 0,
                                    color: '#12876b',
                                    opacity: 0.79,
                                },
                            ],
                            // global: false, // 缺省为 false
                        },

                    },
                },
            },
            // 柱形图  2
            {
                type: 'bar',
                barWidth: 10, // 宽度
                name: '实收',
                datasetIndex: 0,
                yAxisIndex: 0,   // 指定使用第一个y轴
                encode: {
                    x: 0,
                    y: 1
                },
                data: [9000, 8000, 11000, 8000, 7000, 9000, 10000, 7000, 5000, 5000, 9000],
                itemStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: 'transparent',
                                    opacity: 0.85,
                                },
                                {
                                    offset: 0,
                                    color: '#1468c3',
                                    opacity: 1.79,
                                },
                            ],
                            // global: false, // 缺省为 false
                        },

                    },
                },
            },
            {
                // 折线
                type: 'line',
                name: '差异',
                datasetIndex: 0,
                yAxisIndex: 1,  // 指定使用第二个y轴
                encode: {
                    x: 0,
                    y: 2
                },
                data: [700, 700, 500, 1400, 900, 700, 500, 1200, 1500, 800, 800],
                color: '#975f52',
            },
        ]
    }
    myCharts6.setOption(config6)






     // ============================ 中间 第一个圆
    //  const myChartsDom3 = document.querySelector('.conter_left_yuan')
    // const myCharts3 = echarts.init(myChartsDom3)
    // myCharts3.setOption(config3)


</script>

</html>